<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>邮箱修改</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
    <style>
    </style>
</head>
<body>

    <div class="layui-container">
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">邮箱修改</a></legend>
        </fieldset>
        <form class="layui-form">

            <input type="hidden" name="userId" value="1"  />

            <div class="layui-form-item">
                <label class="layui-form-label">新邮箱</label>
                <div class="layui-input-inline">
                    <input type="email"  name="phone" placeholder="请输入"
                           autocomplete="off" lay-verify="required|email"  class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red">*必填</span>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  id="modifyBtn" lay-submit lay-filter="updatePwdForm" >确认修改</button>
                </div>
            </div>
        </form>
    </div>

    <script th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/main.js}" type="text/javascript" charset="utf-8"></script>

    <script>
        layui.use(['form','layer','songCommon'], function() {
            var layer = layui.layer,
                $ = layui.$,
                form = layui.form,
                songCommon = layui.songCommon;

            var path = "/v1/pwd/updatePwd";
            // 监听表单提交
            form.on('submit(updatePwdForm)',function (rowData) {

                var password = rowData.field.password;
                var confirmPwd = rowData.field.confirmPwd;
                if (password !== confirmPwd) {
                    songCommon.showFail("两次填写密码不一致！");
                    return false;
                }
                songCommon.showLoading();
                $.ajax({
                     url: '/v1/pwd/updatePwd',
                     data: rowData.field,
                     type: 'POST',
                     dataType: 'JSON',
                     success: function (res) {
                         songCommon.closeAllLoading();
                         if (res.code === 0) {
                             layer.msg("修改成功", {icon: 1,skin: 'layer-ext-moon'} ,function () {
                                 location.href = "/v1/pwd/pwdManage";
                             });
                         } else {
                             songCommon.showFail(res.msg);
                         }
                     },
                     error: function (error) {
                         songCommon.closeAllLoading();
                         songCommon.showError("发生错误");
                     }
                 });
                return false;
            });

            // 表单校验
            form.verify({
                pwd : function (value,item) {
                    if (value === "") {
                        return "不允许为空";
                    }
                    if (value.length < 6 || value.length > 20) {
                        return "请确保长度范围在[6,20]";
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                        return '不能全为数字';
                    }
                }
            });
        });

    </script>
</body>
</html>